<template>
    <layout>
        <div class="page-data">
            <div class="page-header">
                数据
            </div>
            <div class="page-body c-search">
                <div class="form-group pull create-time">
                    <label>查询时间</label>
                    <div class="date iconCell">
                        <div @click="openPicker(0)">
                            <input disabled type="text" v-model="searchParm.start_at">
                        </div>
                        <div class="iconfont">
                            <i class="icon-close little" v-if="searchParm.start_at" @click="clearStartAt"></i>
                            <i class="icon-xiala" @click="openPicker(0)"></i>
                        </div>
                    </div>
                    <span>至</span>
                    <div class="date iconCell">
                        <div @click="openPicker(1)">
                            <input type="text" v-model="searchParm.end_at" disabled>
                        </div>
                        <div class="iconfont">
                            <i class="icon-close little" v-if="searchParm.end_at" @click="clearEndAt"></i>
                            <i class="icon-xiala" @click="openPicker(1)"></i>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="result">
                <li class="trans-data">
                    <div>
                        <span>总交易量</span>
                        <p>{{orderAll}}</p>
                    </div>
                    <div>
                        <span>总提单量</span>
                        <p>{{cancelOrder+successOrder+revokeOrder+auditOrder+refuseOrder}}</p>
                    </div>
                </li>
                <li class="pass-rate">
                    <p>通过率 <span style='margin-left: 20px;color: #508cee'>{{(cancelOrder+successOrder+revokeOrder+auditOrder+refuseOrder)==0?0+'%':((successOrder/(cancelOrder+successOrder+revokeOrder+auditOrder+refuseOrder)*100).toFixed(2)+'%')}}</span></p>
                </li>
            </ul>
            <datadrawparam :successOrder='successOrder' :cancelOrder='cancelOrder' :revokeOrder='revokeOrder' :auditOrder='auditOrder' :refuseOrder='refuseOrder' :orderTotle='cancelOrder+successOrder+revokeOrder+auditOrder+refuseOrder'></datadrawparam>
            <mt-datetime-picker
                    ref="picker"
                    type="date"
                    :startDate="starDate"
                    :endDate="endDate"
                    v-model="pickerValue"
                    @confirm="handleConfirm">
            </mt-datetime-picker>
        </div>
        </div>
    </layout>
</template>
<script>
    import layout from './layout'
    import Config from '../api/config'
    import {mapState} from "vuex"
    import {dateFormat} from '../util/methods'
    import datadrawparam from './datadrawparam'
    export default {
        name: 'data',
        components: {
            layout,
            datadrawparam
        },
        data(){
            return {
                pickerValue: dateFormat(new Date(), "yyyy-MM-dd"),
                starDate: new Date(new Date().getFullYear() - 1, 0, 1),
                endDate: new Date(new Date().getFullYear() + 1, 11, 31),
            }
        },
        mounted(){
            this.getorderdata()
        },
        methods: {
            getorderdata(){
                this.$store.dispatch({
                    type: 'orderStastic',
                }).then(function (res) {
                }, function (err) {
                })
            },
            handleConfirm(){
                let searchKey = this.timeIndex == 0 ? 'start_at' : 'end_at'
                this.$store.commit("setDate", {key: searchKey, value: dateFormat(this.pickerValue, "yyyy-MM-dd")})
            },
            clearStartAt(){
                this.$store.commit("setDate", {key: 'start_at', value: ''})
            },
            clearEndAt(){
                this.$store.commit("setDate", {key: 'end_at', value: ''})
            },
            openPicker(i) {
                this.timeIndex = i;
                this.$refs.picker.open();
            },
        },
        watch: {
            "searchParm.start_at"(cur, old){
                this.getorderdata()
            },
            "searchParm.end_at"(cur, old){
                this.getorderdata()
            }
        },
        computed: {
            ...mapState({
                orderAll: state => state.data.orderAll,
                searchParm: state => state.data.param,
                successOrder: state => state.data.successOrder,
                cancelOrder: state => state.data.cancelOrder,
                revokeOrder: state => state.data.revokeOrder,
                auditOrder: state => state.data.auditOrder,
                refuseOrder: state => state.data.refuseOrder
            })
        },
    }
</script>


